<template>
	<view class="p30">
		<view class="card-cell-box pb20 mb30">
			<title-bar title="基础信息" :isRequire="true"></title-bar>
			<u--form labelPosition="left" ref="form1" labelWidth="90">
				<u-form-item label="保养时间" borderBottom @click="showTime = true;" ref="item1">
					<u--input v-model="time" disabled disabledColor="#ffffff" placeholder="请选择保养时间" border="none"
						inputAlign="right">
					</u--input>
					<u-icon slot="right" name="arrow-right" color="#C9D3E9"></u-icon>
				</u-form-item>
				<u-form-item label="支出费用" borderBottom>
					<u--input v-model="expenses" border="none" placeholder="请输入支出费用" inputAlign="right">
						<template v-slot:suffix>
							<text class="f24">元</text>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item label="当前里程" border="none">
					<u--input v-model="mileage" border="none" placeholder="请输入当前公里数" inputAlign="right">
						<template v-slot:suffix>
							<text class="f24">KM</text>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="card-cell-box pb20 mb30">
			<title-bar title="保养内容" :isRequire="true"></title-bar>
			<view class="flex-wrap">
				<view :class="['circle-tag',{'active-tag':!$validatenull(item.isSelect) ? item.isSelect : false}]"
					v-for="(item,index) in carTypeMaintainProject" @click="selectItem(item,index)" :key="item.id">
					{{item.projectName}}
				</view>
			</view>
		</view>
		<view class="card-cell-box pb20 mb30">
			<title-bar title="备注内容"></title-bar>
			<u--textarea v-model="remark" placeholder="请在此输入备注内容" border="none"></u--textarea>
		</view>
		<view class="card-cell-box mt30  pb20">
			<view class="flex-between">
				<title-bar title="上传图片"></title-bar>
				<text class="c-info f20">最多3张，建议小于2MB</text>
			</view>
			<view class="mt10">
				<u-upload ref="upload" accept="image" :fileList="fileList" name="1" multiple :maxCount="3"
					@delete="deleteFun" @afterRead="afterRead" :previewFullImage="true"></u-upload>
			</view>
		</view>

		<view class="flex-center">
			<view style="width: 150px;" class="mt100">
				<u-button type="primary" text="保存" :throttleTime="1000" @click="saveMaintainFun"></u-button>
			</view>
		</view>
		<u-datetime-picker :show="showTime" v-model="time" mode="datetime" @cancel="cancel" @confirm="confirm">
		</u-datetime-picker>
	</view>
</template>

<script>
	import TitleBar from "@/components/title-bar";
	import {
		getNowTime,
		getSecondsUtil,
		throttle
	} from "@/utils/utils.js"
	import uploadMixins from "@/pagesMy/uploadMixins.js"
	import {
		saveMaintainAPI,
	} from "@/api/api/maintain.js"
	import {
		getCartypeDetailAPI
	} from "@/api/api/car.js"
	import {
		mapState
	} from 'vuex'	
	export default {
		mixins: [uploadMixins],
		components: {
			TitleBar
		},
		data() {
			return {
				showTime: false,
				time: getNowTime(),
				remark: "",
				expenses: "",
				mileage: "",
				fileList: [],
				carTypeMaintainProject: [],
				carTypeMaintainList: [],
				title: "",
			}
		},
		onShow() {
			this.$store.commit("setSpecialAppOnShow", false);
		},
		computed: {
			...mapState(["deviceData", "maintainForm"])
		},
		onLoad(params) {
			this.getCartypeDetailAPIFun();
			this.title = params.title;
			uni.setNavigationBarTitle({
				title: params.title + "保养"
			});
			if (this.title == "修改") {
				let f = this.maintainForm;
				this.time = f.maintainTime;
				this.mileage = f.mileage;
				this.expenses = f.expenses;
				this.remark = f.remark;
				let fileList = [];
				let requestFileList = [];
				if (!this.$validatenull(f.attachList)) {
					f.attachList.forEach((item) => {
						fileList.push({
							"url": item.link
						})
						requestFileList.push({
							attachId: item.attachId,
							attachType: 1,
							link: item.link,
							originalName: item.originalName
						})
					});
				}
				this.fileList = fileList;
				this.requestFileList = requestFileList;
			} else {
				this.mileage = this.deviceData.totalMileage;
			}

		},
		watch: {
			"mileage": {
				handler(val) {
					this.getCarTypeMaintainProject();
				},
			},
		},
		methods: {
			getCartypeDetailAPIFun() {
				getCartypeDetailAPI(this.deviceData.carTypeId).then(([err, data]) => {
					if (err) return;
					if (!this.$validatenull(data.carTypeMaintainList)) {
						this.carTypeMaintainList = data.carTypeMaintainList;
						this.getCarTypeMaintainProject();
					}
				})
			},
			getCarTypeMaintainProject() {
				let len = this.carTypeMaintainList.length;
				this.carTypeMaintainProject = [];
				for (let i = 0; i < this.carTypeMaintainList.length; i++) {
					let item = this.carTypeMaintainList[i];
					//判断条件
					let currentMileage = parseFloat(this.mileage);
					if (currentMileage > item.mileage || currentMileage == item.mileage) {
						if (this.title == "修改") {
							let maintainIdArr = this.maintainForm.maintainId.split(",");
							item.carTypeMaintainProject.forEach((element) => {
								if (maintainIdArr.includes(element.id)) {
									element.isSelect = true;
								}
							})
						}
						this.carTypeMaintainProject = item.carTypeMaintainProject;
						break;
					}
				}
			},
			saveMaintainFun: throttle(function() {


				console.log("requestFileList", this.requestFileList);
				let expenses = /^(-)?(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/;
				let mileage = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
				if (this.expenses && !expenses.test(this.expenses)) {
					this.$showToast("请输入正确的金额");
					return;
				}
				if (this.mileage && !mileage.test(this.mileage)) {
					this.$showToast("请输入正确里程数");
					return;
				}
				let params = {
					carId: this.deviceData.id,
					carName: this.deviceData.nickName,
					mileage: this.mileage,
					expenses: this.expenses,
					remark: this.remark,
					attachList: this.requestFileList,
					maintainTime: this.time
				}
				let maintainId = [];
				let maintainName = [];
				if (this.carTypeMaintainProject.length) {
					this.carTypeMaintainProject.forEach((item) => {
						if (item.isSelect) {
							maintainId.push(item.id);
							maintainName.push(item.projectName);
						}
					})
					params.maintainId = maintainId.join(",");
					params.maintainName = maintainName.join(",")
				}
				if (this.title == "修改") {
					params.id = this.maintainForm.id;
				}
				saveMaintainAPI(params).then(([err, data]) => {
					if (err) return;
					this.$showToast("添加成功");
					this.$navigateBackDuration(1);
				})

			}),
			cancel() {
				this.showTime = false;
			},
			confirm(result) {
				let value = getSecondsUtil(result.value);
				this.showTime = false;
				setTimeout(() => {
					this.time = value;
				});
			},
			selectItem(item, index) {
				item.isSelect = !this.$validatenull(item.isSelect) ? !item.isSelect : true;
				this.$set(this.carTypeMaintainProject, index, item);
			},
			$navigateBackDuration(delta, duration = 1500) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.isRefresh = true;
				setTimeout(() => {
					uni.navigateBack({
						delta: delta
					})
				}, duration)
			}
		}

	}
</script>

<style>
</style>
